<template>
  <div class="box">
    <ul class="img-list">
        <img :src="img_name" alt="">
      <li v-for="(item,index) of img_names" :key="index" @click="img_name = item">
        {{index + 1}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        // idName : "img-name1",
        img_names : [
          "/images/1.jpg",
          "/images/2.jpg",
          "/images/3.jpg",
          "/images/4.jpg",
          "/images/1.jpg",
        ],
        img_name:"/images/1.jpg"
      }
    }
  }
</script>

<style>
  *{
    margin: 0;
    padding: 0;
  }
  .box{
    width: 200px;
    height: 250px;
    overflow: hidden;
    border: #000 1px solid ;
    margin: 0 auto;
  }
  .img-list li{
    width: 25%;
    text-align: center;
    line-height: 50px;
    /* height: ; */
    float: left;
    list-style: none;
  }
  img{
    width: 200px;
    height: 200px;
    float: left;
  }
  li{
    float: left;
    width: 50px;
    height: 50px;
    list-style: none;
    line-height: 50px;
    text-align: center;
    border: #000 solid 1px;
    box-sizing: border-box;
    cursor: pointer;
  }
</style>
